<template>
  <div class="provide-coupon">
    <div class="head-title p-flex p-ai-c">
      <div>优惠券名称：{{ parmasState.couponName }}</div>
      <div>优惠方式：{{ parmasState.preferentialWay }}</div>
      <div>有效期：{{ parmasState.termOfValidity }}</div>
    </div>

    <div class="form-item">
      <div class="title"><span class="star">*</span>启动时间</div>
      <div class="item">
        <el-date-picker
          v-model="parmasState.startTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="small"
        />
      </div>
    </div>

    <div class="form-item">
      <div class="title">用户类型</div>
      <div class="item">
        <el-radio-group v-model="parmasState.userType">
          <el-radio label="不限" size="large">不限</el-radio>
          <el-radio label="新生" size="large">新生</el-radio>
          <el-radio label="老生" size="large">老生</el-radio>
          <el-radio label="指定用户" size="large">指定用户</el-radio>
        </el-radio-group>
      </div>
    </div>

    <div v-if="parmasState.userType !== '指定用户'">
      <div class="form-item">
        <div class="title">课程产品类型</div>
        <div class="item">
          <el-radio-group v-model="parmasState.productType" class="ml-4">
            <el-radio label="不限" size="large">不限</el-radio>
            <el-radio label="指定课程产品" size="large">指定课程产品</el-radio>
          </el-radio-group>
        </div>
      </div>
  
      <div class="small-title">优惠券发放范围</div>
      
      <div class="form-item">
        <div class="title"><span class="star">*</span>产品分类</div>
        <div class="item">
          <el-radio-group v-model="parmasState.proCategorize" class="ml-4">
            <el-radio label="班级" size="large">班级</el-radio>
            <el-radio label="套餐" size="large">套餐</el-radio>
          </el-radio-group>
        </div>
      </div>
  
      <div class="form-item">
        <div class="title"><span class="star">*</span>分校/校区</div>
        <div class="item">
          <div class="name-list p-flex p-fw-w">
            <div class="cursor s_li"
            :class="parmasState.school == item.name ? 's_li_b' : ''"
            @click="parmasState.school = item.name"
            v-for="(item, index) in schoolOption" :key="index">
              {{ item.name }}
            </div>
          </div>
          <div class="check-list">
            <el-checkbox
              v-model="checkAll"
              :indeterminate="isIndeterminate"
              @change="handleCheckAllChange"
              >全选</el-checkbox>
            <el-checkbox-group
              v-model="parmasState.schoolAddress"
              @change="handleCheckedCitiesChange"
            >
              <el-checkbox v-for="address in schoolAddressOption"
              :key="address"
              :label="address.name">
              {{ address.name }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
  
      <div class="form-item">
        <div class="title"><span class="star">*</span>年份/季节</div>
        <div class="item">
          <div class="name-list p-flex p-fw-w">
            <div class="cursor s_li" 
            :class="parmasState.year == item.name ? 's_li_b' : ''"
            @click="parmasState.year = item.name"
            v-for="(item, index) in yearOption" :key="index">
              {{ item.name }}
            </div>
          </div>
          <div class="check-list">
            <el-checkbox-group v-model="parmasState.season">
              <el-checkbox :label="item.name" v-for="(item, index) in seaconOption" :key="index"/>
            </el-checkbox-group>
          </div>
        </div>
      </div>
  
      <div class="form-item">
        <div class="title"><span class="star">*</span>课程类型</div>
        <div class="item">
          <div class="check-list">
            <el-checkbox
              v-model="courserAll"
              :indeterminate="isCourserIndeterminate"
              @change="handleCourserAllChange"
              >全选</el-checkbox>
            <el-checkbox-group
              v-model="parmasState.courseType"
              @change="handleChange"
            >
              <el-checkbox v-for="item in courseTypeOption" :key="item" :label="item.name">
              {{ item.name }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
  
      <div class="form-item">
        <div class="title"><span class="star">*</span>学科</div>
        <div class="item">
          <div class="name_list subject cursor" @click="openDailog(0)">
            <div>
              请点击选择学科
            </div>
          </div>
        </div>
      </div>
  
      <div class="form-item">
        <div class="title">班型</div>
        <div class="item">
          <div class="name_list">
            暂无班型
          </div>
        </div>
      </div>
  
      <div class="form-item">
        <div class="title">课程名称</div>
        <div class="item">
          <div class="name_list subject cursor" @click="openDailog(1)">
            <div>
              请点击选择课程名称
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-else>
      <el-button type="primary" plain size="small">导入学员</el-button>
      <el-button type="primary" plain size="small">下载导入模板</el-button>
    </div>
  </div>
  <div class="save-btn">
    <el-button size="small" type="primary" @click="confirm">
      确定
    </el-button>
    <el-button size="small" type="danger" @click="emits('cancel')">
      取消
    </el-button>
  </div>
  <div class="dialog_div">
		<el-dialog
			v-model="dialogVisible"
			:title="openCom == 0 ? '学科/班型' : '课程名称'"
			:width="openCom == 0 ? '30%' : '38%'"
		>
      <Subject v-if="openCom == 0" />
      <Course v-else />
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, defineEmits } from "vue";
import Subject from "./components/Subject.vue";
import Course from "./components/Course.vue";
const parmasState = ref({
  couponName: "蔡燕毅19979623829美容全科校区固定折扣原价3250元",
  preferentialWay: "直减",
  termOfValidity: "2021-04-15~2021-04-17",
  startTime: "",
  userType: "不限",
  productType: "不限",
  proCategorize: "班级",
  school: "",
  schoolAddress: [],
  year: "2023年",
  season: [],
  courseType: [],
  subject: "",
  classType: "暂无班型",
  courseName: ""
})

const schoolOption = ref([
  {name: "东莞培优二部分校", id: 1},
  {name: "广州培优二部分校", id: 2},
  {name: "佛中城市分校", id: 3}
])

const schoolAddressOption = ref([
  {name: "三乡", id: 1},
  {name: "沙溪", id: 2},
  {name: "古镇", id: 3}
])

const yearOption = ref([
  {name: "2020年", id: 1},
  {name: "2021年", id: 2},
  {name: "2022年", id: 3},
  {name: "2023年", id: 4},
  {name: "2024年", id: 5},
  {name: "2025年", id: 6},
  {name: "2026年", id: 7},
  {name: "2027年", id: 8},
])

const seaconOption = ref([
  {name: "春季"},
  {name: "夏季"},
  {name: "秋季"},
  {name: "冬季"}
])

const courseTypeOption = ref([
  {name: "进修类", id: 0},
  {name: "基础类", id: 1}
])

const checkAll = ref(false)
const isIndeterminate = ref(false)

const handleCheckAllChange = (val) => {
  parmasState.value.schoolAddress = val ? schoolAddressOption.value.map(m => m.name) : []
  isIndeterminate.value = false
}
const handleCheckedCitiesChange = (value) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === schoolAddressOption.value.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < schoolAddressOption.value.length
}
const courserAll = ref(false)
const isCourserIndeterminate = ref(false)

const handleCourserAllChange = (val) => {
  parmasState.value.courseType = val ? courseTypeOption.value.map(m => m.name) : []
  isCourserIndeterminate.value = false
}
const handleChange = (value) => {
  const checkedCount = value.length
  courserAll.value = checkedCount === courseTypeOption.value.length
  isCourserIndeterminate.value = checkedCount > 0 && checkedCount < courseTypeOption.value.length
}

const confirm = () => {
  emits('cancel')
}

const dialogVisible = ref(false)
const openCom = ref(0)

const openDailog = (type) => {
  openCom.value = type
  dialogVisible.value = true
}

const emits = defineEmits(['confirm', 'cancel'])
</script>

<style lang="scss" scoped>
.provide-coupon {
  padding: 0 30px;
  font-size: 14px;
  color: #666666;
  height: 500px;
  overflow-y: auto;
  .head-title {
    border-bottom: 1px #bbb solid;
    padding-bottom: 10px;
    margin-bottom: 20px;
    &>div {
      margin-right: 30px;
    }
  }
  .form-item {
    display: flex;
    padding-bottom: 20px;
    .title {
      width: 90px;
      margin-right: 15px;
      &>span {
        color: #ff4a3f;
        margin-right: 4px;
      }
    }
    .item {
      .name-list {
        .s_li {
          margin: 0 15px 10px 0;
        }
        .s_li_b {
          color: #27b2fb;
        }
      }
    }

    .subject {
      border: 1px solid #d7d7d7;
      padding: 3px 5px;
      width: 450px;
      min-height: 58px;
    }
  }

  .small-title {
    border-left: 4px solid #27b2fb;
    padding-left: 5px;
    margin-bottom: 15px;
  }
}
.save-btn {
  border-top: 1px solid #cfcfcf;
  text-align: center;
  padding: 20px 0;
  background-color: #f0f4f7;
}

.dialog_div {
	::v-deep .el-dialog__body{
		border-top: 1px #cfcfcf solid;
		padding: 0;
		padding-top: 20px;
	}
}
</style>